<template>
  <div id="app">
  	<div style="width: 100%;height: 20px;"></div>

	<div class="info_area">
		<div class="info" v-for="(item,index) in newsdata">
			<p class="title" v-if="item.title"><router-link :to="{ name: 'postdetail', params: { pid:item.id }}" >{{ item.title }}</router-link></p>
			<p class="auther" ><router-link :to="{ name: 'postdetail', params: { pid:item.id }}" >{{ item.auther }} | {{ item.create_time }}</router-link></p>
			<p class="pic" v-if="item.img_url"><router-link :to="{ name: 'postdetail', params: { pid:item.id }}" ><img :src="item.img_url" alt=""></router-link></p>
			<p class="context" v-if="item.summary"><router-link :to="{ name: 'postdetail', params: { pid:item.id }}" >{{ item.summary }}</router-link></p>
		</div>
	</div>
	<notice>
	</notice>
  </div>
</template>

<script>
import notice from "./notice.vue"
export default {
  name: 'index',
  components:{
  	'notice':notice
  },
  data() {
    return {
        limit:6,
    	newsdata:""
    }
  },
  created:function(){
    this.$http({
        method:'GET',
            url:'http://123.56.86.203/post?limit='+this.limit,
    }).then(function(info){
            if(info.body.status == 1){
                this.newsdata = info.body.data
            }else{
                console.log('暂无数据');
            }
    },function(error){
           console.log(error);
    })
  }
}
</script>

<style scoped>

#app{
  width:1000px;
  margin:0 auto;
}
#app .router-link-exact-active{
	background-color: #fff;
}
.info_area{
	width: 73%;
	background: #fff;
	float:left;
}
.info{
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
.info .title a {
	height: 35px;
	font:bold 21px/35px '微软雅黑';
	color:#666;
}
.info .auther a{
	height: 40px;
	font:13px/40px '微软雅黑';
	color:#000;	
}
.info .pic img{
	width: 100%;
}
.info .context a{
	height: 40px;
	font:14px/40px '微软雅黑';
	color:#666;	
}


</style>
